/**
 * @function getPosition
 * @description 初始化处理省数据,用于定位Marker和targetName显示
 * @param {string} adcode: 区域编码
 */
const getPosition = (adcode) => {
  let str = "";
  switch (adcode) {
    case "110000":
      str = "北京市_116.395825_39.941005";
      break;
    case "120000":
      str = "天津市_117.210813_39.14393";
      break;
    case "130000":
      str = "河北省_115.177813_38.206007";
      break;
    case "140000":
      str = "山西省_112.564662_37.872049";
      break;
    case "150000":
      str = "内蒙古_110.052771_41.34515";
      break;
    case "210000":
      str = "辽宁省_123.004468_41.455972";
      break;
    case "220000":
      str = "吉林省_126.346847_43.833111";
      break;
    case "230000":
      str = "黑龙江省_128.664906_46.690662";
      break;
    case "310000":
      str = "上海市_121.416372_31.45115";
      break;
    case "320000":
      str = "江苏省_119.31908_32.642047";
      break;
    case "330000":
      str = "浙江省_120.827658_30.180849";
      break;
    case "340000":
      str = "安徽省_116.840281_31.83996";
      break;
    case "350000":
      str = "福建省_118.680011_26.017147";
      break;
    case "360000":
      str = "江西省_116.545924_28.190379";
      break;
    case "370000":
      str = "山东省_118.900778_36.486773";
      break;
    case "410000":
      str = "河南省_114.779784_34.986831";
      break;
    case "420000":
      str = "湖北省_113.602357_30.892777";
      break;
    case "430000":
      str = "湖南省_112.130573_27.929244";
      break;
    case "440000":
      str = "广东省_114.083052_23.555889";
      break;
    case "450000":
      str = "广西_109.152576_23.080123";
      break;
    case "460000":
      str = "海南省_110.072441_19.494242";
      break;
    case "500000":
      str = "重庆市_107.377359_29.631998";
      break;
    case "510000":
      str = "四川省_103.182775_30.528033";
      break;
    case "520000":
      str = "贵州省_106.199932_26.399788";
      break;
    case "530000":
      str = "云南省_102.189321_24.66383";
      break;
    case "540000":
      str = "西藏_92.365164_29.792605";
      break;
    case "610000":
      str = "陕西省_108.334018_34.150637";
      break;
    case "620000":
      str = "甘肃省_104.249818_35.756198";
      break;
    case "630000":
      str = "青海省_100.975099_36.353776";
      break;
    case "640000":
      str = "宁夏_107.119797_38.322051";
      break;
    case "650000":
      str = "新疆_88.538527_43.616418";
      break;
    case "710000":
      str = "台湾_121.359304_24.461909";
      break;
    case "810000":
      str = "香港_115.067429_22.630108";
      break;
    case "820000":
      str = "澳门_113.338083_22.151047";
      break;
    default:
      str = "北京市_116.395825_39.941005";
      break;
  }

  const position = str.split("_");
  return {
    targetName: position[0],
    longitude: position[1],
    latitude: position[2],
  };
};

/**
 * @function initialize
 * @description 初始化渲染地图
 */
let map = undefined;
const initialize = () => {
  map = new AMap.Map("mapContainer", {
    zoom: 4,
    zooms: [4, 20],
    center: [116.404, 39.915],
  });
  map.plugin(
    ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", "AMap.HawkEye"],
    () => {
      map.addControl(new AMap.Scale()); //比例尺
      map.addControl(
        new AMap.ToolBar({
          position: "RT",
        })
      ); //工具条
      map.addControl(new AMap.ControlBar()); //工具条方向盘
      map.addControl(new AMap.HawkEye()); //鹰眼
    }
  );
};

/**
 * @function drawMapText
 * @description 主要用于自定义文本点标记Marker
 * @param  {string} adlist:区域列表
 */
const drawMapText = (adlist) => {
  const { list = [] } = adlist;

  list.forEach((item) => {
    const position = getPosition(item.province_code);
    const { targetName, longitude, latitude } = position;

    const mapText = new AMap.Text({
      text: targetName,
      position: [longitude, latitude],
      topWhenClick: "true",
      anchor: "center",
      cursor: "pointer",
      style: {
        width: "52px",
        height: "18px",
        padding: "0",
        textAlign: "center",
        lineHeight: "18px",
        fontSize: "12px",
        fontWeight: "700",
        color: "#fff",
        border: "none",
        borderRadius: "5px",
        backgroundColor: "#f5222d",
        whiteSpace: "nowrap",
        MozUserSelect: "none",
      },
    });
    mapText.on("mouseover", () => {
      mapText.setStyle({
        backgroundColor: "#096dd9",
      });
    });
    mapText.on("mouseout", () => {
      mapText.setStyle({
        backgroundColor: "#f5222d",
      });
    });
    mapText.on("click", () => {
      drawProvinceInfo(item.province_code, position);
    });
    mapText.add(map);
  });
};

/**
 * @function drawProvinceInfo
 * @description 点击自定义Marker省份按钮,渲染信息窗体
 * @param  {string} adcode:区域编码
 * @param  {string} targetName:当前省名称
 * @param  {string} longitude:当前经度
 * @param  {string} latitude:当前维度
 */
const drawProvinceInfo = (adcode, { targetName, longitude, latitude }) => {
  $ajax("getProvinceInfo", ({ data: { domContent = "", count = 0 } }) => {
    const content = `
        <div class="infoContainer">
          <div class="infoTitle">
            <h2>${targetName}</h2>
            <span>${targetName}范围内共<b style="color:#f5222d;">${count}</b>种水果</span>
          </div>
          <div class="infoContent">
            <div class="infoContentTitle">水果种类</div>
            <ul class="infoContentBox">${domContent}</ul>
          </div>
          <div class="infoBottom">
            <button onclick="drawProvinceDistribute('${adcode}')">${targetName}市场分布</button>
          </div>
        </div>`;
    const infoWindow = new AMap.InfoWindow({
      isCustom: false,
      closeWhenClickMap: true,
      content,
      offset: new AMap.Pixel(0, -10),
    });
    infoWindow.open(map, [longitude, latitude]);
  });
};

/**
 * @function drawProvinceDistribute
 * @description 点击市场分布按钮,查看全部市场分部与渲染区域边界
 * @param  {string} adcode:区域编码
 */
const drawProvinceDistribute = (adcode) => {
  const { targetName, longitude, latitude } = getPosition(adcode);

  // 清除地图图层等操作
  map.setZoomAndCenter(6, [longitude, latitude], true);
  map.setZooms([5, 20]);

  // 绘制边界
  drawBounds(adcode);

  // 获取市场数据
  getMenu(targetName);
};

/**
 * @function drawBounds
 * @description 绘制行政省边界区域
 * @param  {string} keyword:行政区code
 */
let district = null;
let polygon = null;
const drawBounds = (keyword) => {
  map.plugin("AMap.DistrictSearch", () => {
    if (!district) {
      //实例化DistrictSearch
      district = new AMap.DistrictSearch({
        subdistrict: 0,
        extensions: "all",
        level: "province",
      });
    }

    // 行政区查询
    district.search(keyword, (status, result) => {
      if (polygon) {
        map.remove(polygon); //清除上次结果
        polygon = null;
      }
      if (status !== "complete") {
        return;
      }

      const bounds = result.districtList[0].boundaries;
      if (bounds) {
        //生成行政区划polygon
        for (let i = 0; i < bounds.length; i += 1) {
          //构造MultiPolygon的path
          bounds[i] = [bounds[i]];
        }
        polygon = new AMap.Polygon({
          strokeWeight: 1,
          path: bounds,
          fillOpacity: 0.4,
          fillColor: "#80d8ff",
          strokeColor: "#0091ea",
        });
        map.add(polygon);
        // 视口自适应
        map.setFitView(polygon, true, [60, 60, 60, 60]);
      }
    });
  });
};

/**
 * @Start 市场分布
 * --------------------------------------------------------------------
 */

/**
 * @function getMenu
 * @description 获取市场列表数据并渲染在左侧菜单区域
 * @param  {string} urlFlag: 区分url标记
 * @param  {string} title:行业标题
 * @param  {string} adcode:区域编码
 */
const getMenu = (title) => {
  map.clearMap();
  // 请求菜单数据
  $ajax("getLeftMenu", ({ list: menus = [] }) => {
    let menuHTML = `
      <div class="menuTitle">
        <a href="javascript:void(0)" onclick="location.reload()">所有市场</a>
        >
        <span>所选：</span>
        <span class="menuSelected"> ${title}</span>
      </div>
      <div>
      `;
    menus.forEach((menu, idx) => {
      menuHTML += `
        <div class="menuBox" sort="${idx + 1}">
          <div class="icon">${idx + 1}</div>
          <div class="menuContent">
            <div class="menuName">${menu.name}</div>
            <div class="menuInfo">
              <p>经营范围：${menu.businessScope}</p>
              <p>供求信息：${menu.supplyNum}条</p>
              <p>现货信息：${menu.stockNum}条</p>
            </div>
          </div>
        </div>
        `;
      // 地图添加市场标记
      drawMapMarker(menu, idx + 1 + "");
    });
    document.getElementById("menuContainer").innerHTML = menuHTML + "</div>";

    // 绑定事件
    bindMenuEvent(menus);
  });
};

/**
 * @function bindMenuEvent
 * @description 左侧菜单元素绑定移入移出和点击事件
 */
const bindMenuEvent = (menus) => {
  jQuery("div.menuBox").hover(
    function () {
      $(this).children("div.icon").css("background-color", "#fff");
      $(this).children("div.icon").css("color", "#2e3243");
      const sort = $(this).attr("sort");
      mapMarkHighlight(sort, true);
    },
    function () {
      $(this).children("div.icon").css("background-color", "#333333");
      $(this).children("div.icon").css("color", "#fff");
      const sort = $(this).attr("sort");
      mapMarkHighlight(sort);
    }
  );

  jQuery("div.menuBox").click(function () {
    $(this).children("div.icon").css("background-color", "#fff");
    $(this).children("div.icon").css("color", "#2e3243");
    const sort = $(this).attr("sort");
    drawMarketInfo(menus[sort - 1]);
  });
};

/**
 * @function drawMapMarker
 * @description 为地图上添加市场对应的Marker标记
 * @param {object} menu:市场数据
 * @param {string} idx:索引
 */
const drawMapMarker = (menu, idx) => {
  const longitude = menu.longitude * 1;
  const latitude = menu.latitude * 1;
  const mapMarker = new AMap.Marker({
    map: map,
    size: new AMap.Size(25, 33),
    content: `<div class="marketIcon">${idx}</div>`,
    position: [longitude, latitude],
    offset: new AMap.Pixel(-13, -30),
  });
  mapMarker.on("mouseover", () => {
    mapMarkHighlight(idx, true);
  });
  mapMarker.on("mouseout", () => {
    mapMarkHighlight(idx);
  });
  mapMarker.on("click", () => {
    drawMarketInfo(menu);
  });
};

/**
 * @function mapMarkHighlight
 * @description 地图标志高亮
 * @param  {string} idx: 当前移入的marker索引
 * @param  {boolean} isHover:是否移入
 */
const mapMarkHighlight = (idx, isHover = false) => {
  jQuery.each(jQuery("div.marketIcon"), function () {
    if (jQuery(this).html() === idx && isHover) {
      jQuery(this).addClass("marketIcon-hover");
    } else {
      jQuery(this).removeClass("marketIcon-hover");
    }
  });
};

/**
 * @function drawMarketInfo
 * @description 点击市场信息自定义Marker点,渲染市场详情信息窗体
 * @param  {string} info:当前市场详情信息
 */
let marketInfo = null;
const drawMarketInfo = (info) => {
  if (marketInfo !== null) {
    marketInfo.close();
    marketInfo = null;
  }
  const content = `
    <div class="marketContainer">
        <a href='${info.link}' target='_blank'>
          <img src='${
            info.photo ||
            "https://img1.baidu.com/it/u=2063777893,3765279289&fm=253&fmt=auto&app=120&f=GIF?w=218&h=218"
          }'>
        </a>
        <div class='marketContent'>
          <ul>
            <li>
              <b style='font-size:14px;'>
                <a href='${info.link}' target='_blank'>
                  ${info.name}
                </a>
              </b>
            </li>
            <li>经营范围：${info.businessScope}</li>
            <li>供求信息：${info.supplyNum}</li>
            <li>现货信息：${info.stockNum}</li>
          </ul>
          <div class= 'marketBottom'>
            <a href="javascript:void(0);" onclick="drawProvinceDistribute('${
              info.province
            }')">
              ${getPosition(info.province)["targetName"]}所有市场
            </a>
          </div>
        </div>
    </div>
  `;
  marketInfo = new AMap.InfoWindow({
    isCustom: false,
    closeWhenClickMap: true,
    content,
    offset: new AMap.Pixel(-5, -32),
  });
  const longitude = info.longitude * 1;
  const latitude = info.latitude * 1;
  map.setCenter([longitude, latitude], true);
  marketInfo.open(map, [longitude, latitude]);
};
